<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax XHR</title>
    <script src="./ajax.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    
    <script>

        window.onload = function () {
            console.log(
                $.post('/login')
            )
        }

        /*
            Promise:
                status 状态: Padding, Fulfilled, Rejected

                实例方法
                .then 当 promise 的状态改变发生改变时才会执行的回调函数, 并返回 Promise. 所以可以发起链式调用
                .catch 可以捕获链式调用前面的错误
                .finally 接受两个函数参数, 无论当前状态是完成还是失败, 都会执行.
                
                静态方法
                .resolve()  返回一个 promise 对象, 如果参是 promise 的话 resolve 会等待把 promise 执行完
                .reject()   返回一个 失败的 promise 对象
                .all([])    必须所有的全部成功, 才会走到 then
                .any()      只要有一个成功即可
                .race()     找到最先执行完毕的那个 Promise
        */

        let login = new Promise(function(resolve, reject) {
            ajax({
                url: '/login',
                method: 'POST',
                dataType: 'json',
                success: function(data) {
                    console.log('login', data);
                    resolve(data);
                }, 
                error: function(err) {
                    console.error('login', data);
                    reject(err);
                }
            })
        })

        let getOrderList = new Promise(function(resolve, reject) {
            ajax({
                url: '/getOrderList',
                method: 'POST',
                dataType: 'json',
                success: function(data) {
                    console.log('getOrderList', data);
                    resolve(data);
                }, 
                error: function(err) {
                    console.error('getOrderList', data);
                    reject(err);
                }
            })
        })
        

        let getBalance = new Promise(function(resolve, reject) {
            ajax({
                url: '/getBalance',
                method: 'POST',
                dataType: 'json',
                success: function(data) {
                    console.log('getBalance', data);
                    resolve(data);
                }, 
                error: function(err) {
                    console.error('getBalance', data);
                    reject(err);
                }
            })
        })

        Promise.race([login, getOrderList, getBalance])
            .then(d => {
                console.log('race: ', d)
            })

        // Promise.all([login, getOrderList, getBalance])
        //     .then(d => {
        //         // Fulfilled
        //         console.log(d);
        //     }, (err) => {
        //         // Rejected
        //         console.log('Rejected', err);
        //     })

        // let p = new Promise(function (resolve, reject) {
        //         setTimeout(() => {
        //             resolve(20)
        //         }, 500)
        //     }).then(() => {
        //         return 30
        //     })

        // Promise.resolve(p)
        // .then(n => {
        //     console.log(n)
        // })

        // let p = new Promise(function (resolve, reject) {
        //     console.log(1); // 
        //     resolve(1)
        // }).then(() => {
        //     console.log(3);
        // })
        // console.log(2);
        // 2 1

    </script>
</body>
</html>